<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          body {
            text-align: center;
        }

        table {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        th,
        td {
            height: 30px;
            line-height: 2em;
        }
    </style>
</head>
<body>
    <button>添加表格形成滚动条</button>
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    
    <script>  
    // 做到极致
    
    // 获取元素
    let btn = document.querySelector('button')
    let tbody =document.querySelector('tbody')
    let data = [
            { name: "胡杭", age: 16 },
            { name: "胜明", age: 22 },
            { name: "军毅", age: 21 },
            { name: "晓华", age: 13 },
            { name: "盛聪", age: 23 },
            { name: "侦剑", age: 32 },
            { name: "红翔", age: 25 },
            { name: "超维", age: 18 },
            { name: "士琪", age: 22 },
            { name: "艳华", age: 20 },
        ];


 // 先动态创建表格 形成滚动条
 //添加事件 监听点击添加按钮
btn.addEventListener('click',btnaddRow,false)      
// 监听滚动事件 
window.addEventListener('scroll',function () {
    //创建比例关系 并记录滚动条的滚动距离
let scrollbottom = ((scrollY + innerHeight) / document.body.scrollHeight)
  // 如果滚动条滚动到确定的位置 形成新的表格信息
if ( scrollbottom > 0.9 ) {
    // 渲染页面
    btnaddRow()
}
})
 // 页面渲染函数
 function btnaddRow() {
     // 遍历数组
    for(let i =0;i<data.length;i++){     
                // 创建变量并赋值数组里面的每一个对象  
                 let userInfo = data[i]       
                     // 创建tr元素
                     let tr =document.createElement('tr')
                     tr.innerHTML += `
                    <td>${i + 1}</td>
                    <td>${userInfo.name}</td>
                    <td>${userInfo.age}</td>
                    <td><button>删除</button></td>
                    <td><input type="checkbox" ></td>`
                     tbody.appendChild(tr)
                     // 调用序号更新函数
                 updateNum()
             }  
 }

// 更新序号
 function updateNum() {
     // 创建变量 赋值表格里的每一行
     let rows =tbody.rows
     for(let i = 0;i<rows.length;i++){
        // 序号单元格内输入
        rows[i].children[0].innerText = i+1 
     }
 }  
    </script>
</body>
</html>